<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
   <link rel="stylesheet" href="common.css">
   <style>
        body{
            background-color: #0a2a43;
            min-height: 1500px;
        }
        section{
            position: relative;
        }
        section:before{
            position: absolute;
            content:'';
            width:100%;
            height:100px;
            bottom:0;
            background: linear-gradient(to top,#0a2a43,transparent);
            z-index: 10000;
        }
        section:after{
            position: absolute;
            content:'';
            width:100%;
            height:100px;
            top:0;
            left:0;
            background: #0a2a43;
            mix-blend-mode: color;
            z-index: 10000;
        }
        section img{
            position: absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            object-fit:cover;//图片保持宽高比填充容器
            pointer-events: none;//不响应鼠标事件
        }
        #text{
            position: absolute;
            font-size:10em;
            color:#fff;
            z-index:1
        }
    </style>
  </head>
  <body>
    <section class="flex-center">
       <img src="https://pic.rmb.bdstatic.com/bjh/news/9f11e52f2561ef31fc2b91bca7df71c6.jpeg" alt="" id="bg">
       <img src="https://pic.rmb.bdstatic.com/bjh/news/9f11e52f2561ef31fc2b91bca7df71c6.jpeg" alt="" id="moon">
       <img src="https://pic.rmb.bdstatic.com/bjh/news/9f11e52f2561ef31fc2b91bca7df71c6.jpeg" alt="" id="mountain"></img>
       <img src="https://pic.rmb.bdstatic.com/bjh/news/9f11e52f2561ef31fc2b91bca7df71c6.jpeg" alt="" id="road"></img>
       <h2 id="text">Moon Light</h2>
    </section>
  </body>
  <script type="text/javascript">
    //alt+shift+方向键 可以一行复制多行
    let bg=document.getElementById('bg');
    let moon=document.getElementById('moon');
    let mountain=document.getElementById('mountain');
    let road=document.getElementById('road');
    let text=document.getElementById('text');
    window.addEventListener('scroll',function(){
        let value=window.scrollY;
        bg.style.top=value*0.5+'px';//背景向下
        moon.style.left=-value*0.5+'px';//月亮向左
        mountain.style.top=-value*0.15+'px';//山也向上
        road.style.top=-value*0.15+'px';路向上
        text.style.top=-value+'px';//文字向下
    })
  </script>
</html>
